<template>
  <div style="position: relative;">
    <el-form ref="filterForm" :model="formData" :label-width="formConfig.labelWidth + 'px'" :size="defaultFormItemSize" :label-position="formConfig.labelPosition" @submit.native.prevent>
      <filter-box v-if="!isLoading" :item-width="formConfig.labelWidth + 250">
        <CustomFilterWidget
          v-for="widget in formConfig.formWidgetList"
          :key="widget.id"
          :ref="widget.variableName"
          v-model="formData.formFilter[widget.column.columnName]"
          :widget-config="widget"
          :form-config="formConfig"
          :get-dropdown-params="getDropdownParams"
        />
        <el-button
          v-if="Array.isArray(formConfig.formWidgetList) && formConfig.formWidgetList.length > 0"
          slot="operator"
          type="default"
          :plain="true"
          :size="defaultFormItemSize"
          @click="onReset"
        >
          重置
        </el-button>
        <el-button
          v-if="Array.isArray(formConfig.formWidgetList) && formConfig.formWidgetList.length > 0"
          slot="operator"
          type="primary"
          :plain="true"
          :size="defaultFormItemSize"
          @click="onSearch"
        >
          查询
        </el-button>
        <el-button
          v-for="operation in getTableOperation(false)"
          :key="operation.id"
          slot="operator"
          :size="defaultFormItemSize"
          :plain="operation.plain"
          :type="operation.btnType"
          :disabled="!checkPermCodeExist(getPermCode(formConfig.formQueryTable, operation))"
          @click.stop="onTableOperationClick(operation, null, formConfig.formQueryTable)"
        >
          {{ operation.name }}
        </el-button>
      </filter-box>
    </el-form>
    <el-row>
      <el-col v-if="formConfig.formQueryTable" :span="24">
        <CustomTable
          :ref="formConfig.formQueryTable.variableName"
          :widget-config="formConfig.formQueryTable"
          :form-type="formConfig.formType"
          :get-table-query-params="getTableQueryParams"
          @operationClick="onTableOperationClick"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import '@/staticDict/flowStaticDict.js'
import { mapGetters } from 'vuex'
import { OnlineFormMixins } from './onlineFormMixins.js'
import CustomFilterWidget from '@/views/onlineForm/components/customFilterWidget.vue'
import CustomTable from '@/views/onlineForm/components/customTable.vue'

export default {
  name: 'OnlineQueryForm',
  components: {
    CustomFilterWidget,
    CustomTable
  },
  mixins: [OnlineFormMixins],
  props: {
    formId: {
      type: String,
      required: true
    },
    closeVisible: {
      type: String,
      default: '0'
    }
  },
  inject: ['preview'],
  computed: {
    ...mapGetters(['onlineFormCache'])
  },
  methods: {
    getTableOperation(rowOperation) {
      if (this.formConfig.formQueryTable == null || !Array.isArray(this.formConfig.formQueryTable.operationList)) return []
      return this.formConfig.formQueryTable.operationList.filter(operation => {
        return operation.rowOperation === rowOperation && operation.enabled
      })
    },
    getTableQueryParams(widget) {
      let queryParams = []
      if (Array.isArray(widget.queryParamList)) {
        queryParams = widget.queryParamList.map(item => {
          const paramValue = this.getParamValue(item.paramValueType, item.paramValue)
          if (paramValue == null || paramValue === '' || (Array.isArray(paramValue) && paramValue.length === 0)) return
          const temp = {
            tableName: item.table.tableName,
            columnName: item.column.columnName,
            filterType: item.column.filterType,
            columnValue: item.column.filterType !== this.SysOnlineColumnFilterType.RANFGE_FILTER ? paramValue : undefined
          }

          if (item.column.filterType === this.SysOnlineColumnFilterType.RANFGE_FILTER) {
            temp.columnValueStart = paramValue[0]
            temp.columnValueEnd = paramValue[1]
          }

          return temp
        }).filter(item => item != null)
      }

      return queryParams
    },
    onSearch() {
      this.formData.formFilterCopy = {
        ...this.formData.formFilter
      }
      this.$refs[this.formConfig.formQueryTable.variableName].refresh()
    },
    onReset() {
      if (this.$refs.filterForm) {
        this.$refs.filterForm.resetFields()
        this.$nextTick(() => {
          this.onSearch()
        })
      }
    },
    getDropdownParams(widget) {
      if (Array.isArray(widget.dictParamList)) {
        let params = {}
        for (let i = 0; i < widget.dictParamList.length; i++) {
          const dictParam = widget.dictParamList[i]
          params = this.getParamValueObj(dictParam.dictParamName, dictParam.dictValueType, dictParam.dictValue, params)
          if (params == null) return null
        }
        return params
      } else {
        return {}
      }
    },
    onTableOperationClick(operation, row, widget) {
      if (operation.type === this.SysCustomWidgetOperationType.BATCH_DELETE) {
        this.$refs[this.formConfig.formQueryTable.variableName].batchDelete()
      } else if (operation.type === this.SysCustomWidgetOperationType.EXPORT) {
        this.$refs[this.formConfig.formQueryTable.variableName].export(operation)
      } else {
        this.handlerOperation(operation, row, widget)
      }
    },
    onResume() {
      const key = this.$route.fullPath
      const cacheFormData = this.onlineFormCache[key]
      if (cacheFormData) {
        this.$nextTick(() => {
          if (Array.isArray(this.dropdownWidgetList)) {
            this.dropdownWidgetList.forEach(dropdownWidget => {
              const dropdownWidgetImpl = this.$refs[dropdownWidget.variableName][0]
              if (dropdownWidgetImpl) {
                dropdownWidgetImpl.onVisibleChange()
              }
            })
          }
          this.formData.formFilter = cacheFormData.formFilter
          this.formData.formFilterCopy = cacheFormData.formFilterCopy
          this.$refs[this.formConfig.formQueryTable.variableName].setTableWidget(cacheFormData.tableImpl)
          this.$store.commit('flow/REMOVE_ONLINE_FORM_CACHE', key)
          // this.removeOnlineFormCache(key)
        })
      }
    }
  }
}
</script>

<style>
</style>
